<template>
  <div class="myList">
    <ul>
      <li>
        <div class="title" :style="{ background: $store.state.itemColor }">
          <span>未完成</span
          ><i
            :class="['iconfont icon-jiantouyou', runShow ? 'active' : '']"
            @click="runShow = !runShow"
          ></i>
        </div>
        <transition name="fade">
          <ol v-show="runShow" :style="getHeight(0)">
            <template v-for="(item, index) in toList">
              <li :key="index" v-if="item.flag == 0">
                <input type="checkbox" v-model="item.flag" />
                <span>{{ item.msg }}</span>
                <button class="btnSty" @click="item.flag=2">取消</button>
              </li>
            </template>
          </ol>
        </transition>
      </li>
      <li>
        <div class="title" :style="{ background: $store.state.itemColor }">
          <span>已完成</span
          ><i
            :class="['iconfont icon-jiantouyou', finishShow ? 'active' : '']"
            @click="finishShow = !finishShow"
          ></i>
        </div>
        <transition name="fade">
          <ol v-show="finishShow" :style="getHeight(1)">
            <template v-for="(item, index) in toList">
              <li :key="index" v-if="item.flag == 1">
                <input type="checkbox" v-model="item.flag" />
                <span>{{ item.msg }}</span>
                <span style="margin-left: auto">{{ item.time }}</span>
              </li>
            </template>
          </ol>
        </transition>
      </li>
      <li>
        <div class="title" :style="{ background: $store.state.itemColor }">
          <span>已取消</span
          ><i
            :class="['iconfont icon-jiantouyou', esc ? 'active' : '']"
            @click="esc = !esc"
          ></i>
        </div>
        <transition name="fade">
          <ol v-show="esc" :style="getHeight(2)">
            <template v-for="(item,index) in toList">
              <li :key="index" v-if="item.flag==2">
                <s>{{item.msg}}</s>
                <button class="btnSty" @click="item.flag=0">恢复</button>
              </li>
            </template>
          </ol>
        </transition>
      </li>
    </ul>
  </div>
</template>

<script>
import { reactive, toRefs,computed } from "vue";
export default {
  props: {
    toList: Array,
  },
  setup(props) {
    const data = reactive({
      runShow: false,
      finishShow: false,
      esc: false,
      // runHeight: computed(()=>{
      //   return {
      //     height: props.toList.filter(item => item.flag == 0).length*50 + 'px'
      //   }
      // }),
      // finishHeight: computed(()=>{
      //   return {
      //     height: props.toList.filter(item => item.flag == 1).length*50 + 'px'
      //   }
      // }),
      // escHeight: computed(()=>{
      //   return {
      //     height: props.toList.filter(item => item.flag == 2).length*50 + 'px'
      //   }
      // }),

    });

    const getHeight = (val) => {
      return {
        height: props.toList.filter(item => item.flag == val).length*50 + 'px'
      }
    }
    return {
      ...toRefs(data),
      getHeight
    };
  },
};
</script>
<style lang="scss" scoped>
.myList {
  .title {
    display: flex;
    height: 50px;
    background: pink;
    padding: 0 16px;
    align-items: center;
    justify-content: space-between;
    color: #fff;
    .active {
      transform: rotate(90deg);
    }
  }
  ol {
    // height: 50px;
  }
  ol li {
    height: 50px;
    display: flex;
    align-items: center;
    background: #fff;
    padding: 0 16px;
    input {
      margin-right: 10px;
    }
  }
  .btnSty {
    padding: 5px 12px;
    background: transparent;
    border: 1px solid #ccc;
    border-radius: 6px;
    margin-left: auto;
  }
}
.fade-enter-from,
.fade-leave-to {
  opacity: 0;
  height: 0 !important;
  overflow: hidden;
}
.fade-enter-to {
  overflow: hidden;
}
.fade-enter-active,
.fade-leave-active {
  transition: all 0.3s linear;
}
</style>